<template>
	<view class="main">
		<view class="card">
			<view class="card-tit flex align"><text></text>基本信息</view>
			<!-- <view class="input-item flex align">
				<view>任务名称</view>
				<input placeholder="填写任务名称" />
			</view> -->
			<view class="input-item flex align">
				<view>作品链接</view>
				<input placeholder="填写作品链接" v-model="link" />
			</view>
		</view>
		<view class="card">
			<view class="card-tit flex align"><text></text>视频二维码</view>
			<view class="logo flex align warp">
				<view v-for="(item,index) in task_images" :key="index" style="position: relative;">
					<image :src="item"></image>
					<view class="_del" @click="todel(index)">
						<uni-icons type="clear" size="24" color="#f34d3c"></uni-icons>
					</view>
				</view>
				
			</view>
			<view class="loadUp" @click="toUpload()">
				<uni-icons type="image" color="#7D7D7D" size="30"></uni-icons>
			</view>
			
		</view>
		<view class="card">
			<view class="card-tit flex align"><text></text>POI收藏截图</view>
			<view class="logo flex align warp">
				<view v-for="(item,index) in poi_images" :key="index" style="position: relative;">
					<image :src="item"></image>
					<view class="_del" @click="todel2(index)">
						<uni-icons type="clear" size="24" color="#f34d3c"></uni-icons>
					</view>
				</view>
			</view>
			<view class="loadUp" @click="toUpload2()">
				<uni-icons type="image" color="#7D7D7D" size="30"></uni-icons>
			</view>
		</view>
		<view class="card" v-if="praise_screenshot==2">
			<view class="card-tit flex align"><text></text>好评截图</view>
			<view class="logo flex align warp">
				<view v-for="(item,index) in praise_images" :key="index" style="position: relative;">
					<image :src="item"></image>
					<view class="_del" @click="todel3(index)">
						<uni-icons type="clear" size="24" color="#f34d3c"></uni-icons>
					</view>
				</view>
			</view>
			<view class="loadUp" @click="toUpload3()">
				<uni-icons type="image" color="#7D7D7D" size="30"></uni-icons>
			</view>
		</view>
		<view class="resign-btn" @click="toSubmit()">提交</view>
	</view>
</template>

<script>
	import {
		taskSubmit
	} from '@/api/apiData.js';
	import {
		uploadOss
	} from '@/utils/oss/oss.js'
	export default {
		data() {
			return {
				task_id: '',
				link: '',
				task_images: [],
				poi_images: [],
				praise_images:[],
				logo: '',
				poi:'',
				pathArr:[],
				id:'',
				praise_screenshot:1
			};
		},
		onLoad(option) {
			this.id = option.id
			if(option.praise_screenshot){
				this.praise_screenshot = option.praise_screenshot
			}
		},
		methods: {
			toUpload() {
				let that = this
				uni.chooseImage({
					count: 10,
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success:(res) => {
						// OSS上传(得到在oss文件夹下照片路径)
						let fileArr = res.tempFilePaths
						fileArr.forEach((item,index)=>{
							that.toOss(item,index)
						})
					}
				})
			},
			toUpload2() {
				let that = this
				uni.chooseImage({
					count: 10,
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success:(res) => {
						// OSS上传(得到在oss文件夹下照片路径)
						let fileArr = res.tempFilePaths
						fileArr.forEach((item,index)=>{
							that.toOss2(item,index)
						})
					}
				})
			},
			toUpload3() {
				let that = this
				uni.chooseImage({
					count: 10,
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success:(res) => {
						// OSS上传(得到在oss文件夹下照片路径)
						let fileArr = res.tempFilePaths
						fileArr.forEach((item,index)=>{
							that.toOss3(item,index)
						})
					}
				})
			},
			async toOss(item,index){
				let ossPath = await uploadOss({
					filePathFore: 'img/'+index+'/',
					filePath: item,
				})
				this.task_images.push('https://jgdrxt.oss-cn-shanghai.aliyuncs.com/' + ossPath)
			},
			async toOss2(item,index){
				let ossPath = await uploadOss({
					filePathFore: 'img/'+index+'/',
					filePath: item,
				})
				this.poi_images.push('https://jgdrxt.oss-cn-shanghai.aliyuncs.com/' + ossPath)
			},
			async toOss3(item,index){
				let ossPath = await uploadOss({
					filePathFore: 'img/'+index+'/',
					filePath: item,
				})
				this.praise_images.push('https://jgdrxt.oss-cn-shanghai.aliyuncs.com/' + ossPath)
			},
			todel(index){
				this.task_images.splice(index, 1);
			},
			todel2(index){
				this.poi_images.splice(index, 1);
			},
			todel3(index){
				this.praise_images.splice(index, 1);
			},
			toSubmit(){
				let that = this
				if(that.link==''){
					uni.showToast({
						title:'请填写作品链接',
						icon:'error'
					})
					return false
				}
				if(that.task_images.length==0){
					uni.showToast({
						title:'请上传任务截图',
						icon:'error'
					})
					return false
				}
				if(that.poi_images.length==0){
					uni.showToast({
						title:'请上传POI收藏截图',
						icon:'error'
					})
					return false
				}
				uni.showModal({
					title: "提示",
					content: "确定要提交吗？",
					showCancel: true,
					success: res => {
						if (res.confirm) {
						that.toCom()
						} else {
							
						}
					}
				
				})
			},
			async toCom(){
				let obj = {
					task_id:this.id,
					link:this.link,
					task_images:this.task_images,
					poi_images:this.poi_images,
					praise_images:this.praise_images
				}
				const result = await taskSubmit(obj)
				if(result.code==1){
					uni.showToast({
						title:result.msg,
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/task/submitList?id='+this.id
						})
					},500)
				}else{
					uni.showToast({
						title:result.msg,
						icon:'error'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		margin: 24rpx;
		padding-bottom: 100rpx;

		.card {
			border-radius: 12rpx;
			box-shadow: 1rpx 1rpx 5rpx 1rpx gainsboro;
			padding: 30rpx 24rpx;
			background: white;
			margin-bottom: 30rpx;

			.loadUp {
				background: #D9D9D9;
				border-radius: 12rpx;
				width: fit-content;
				padding: 43rpx;
				margin-top: 20rpx;
			}

			.logo {
				flex-wrap: wrap;
				margin-top: 20rpx;
				image {
					width: 150rpx;
					height: 150rpx;
					margin-right: 20rpx;
					margin-top: 10rpx;
				}
				._del{
					position: absolute;
					top: -10rpx;
					right: -5rpx;
				}
			}

			.card-tit {
				font-size: 32rpx;
				font-weight: bold;

				text {
					background: #FF6543;
					display: block;
					width: 5rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}

			.input-item {
				padding: 19rpx 0;
				border-bottom: solid 1rpx #D9D9D9;
				font-size: 28rpx;

				view {
					width: 30%;
				}
			}
		}

		.resign-btn {
			background: #FF6543;
			border-radius: 12rpx;
			font-size: 48rpx;
			font-weight: bold;
			color: white;
			padding: 10rpx 81rpx;
			width: fit-content;
			margin: 80rpx auto;
		}
	}
</style>